<template>
    <!-- 体检套餐 -->
    <!-- 列表展示 -->
    <div>
        <!-- 头部 -->
         <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/appointment' }">体检类型</el-breadcrumb-item>
              <el-breadcrumb-item>体检套餐</el-breadcrumb-item>
            </el-breadcrumb>
          <el-divider></el-divider>
        </div>
        <div id="heads">
            <div id="head-Phy" v-for="itmse in proBeskList" :key="itmse.besSmId" @click="headImg(itmse.besSmId)">
                <el-row style="margin-top:100px">
                    <el-col :span="9">
                        <div class="grid-content bg-purple">
                            <img :src="'http://192.168.43.183/files/'+itmse.besSmImage">
                        </div>
                    </el-col>
                    <el-col :span="15" style="margin-top: 150px">
                        <div class="grid-content bg-purple-light">
                            <h4 style="cursor: pointer;">{{itmse.besSmName}}</h4>
                            <p style="cursor: pointer;">{{itmse.besSmDesc}}</p>
                            <button style="position: absolute;top:230px;margin-right:15px;color:red;border:1px solid red;width:30px;background: white;font-size: 13px;border-radius: 2px;width:100px">{{itmse.besSmApply}}</button>
                            <button style="position: absolute;top:230px;left:670px;margin-right:15px;color:red;border:1px solid red;width:50px;background: white;font-size: 13px;border-radius: 2px;width:80px;">{{itmse.besSmAge}}</button>
                            <span style="color:red;position: absolute;top:240px;right:265px;font-size:25px">￥{{itmse.besSmPrice}}元</span>
                            <button style="background-color: #24aafd;border:1px solid #24aafd;color:white;width:100px;margin-left:560px;margin-top:75px;">查看</button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Physical',
  data () {
    return {
      num: 0,
      proBeskList: []
    }
  },
  // 套餐信息
  methods: {
    // 套餐的点击事件 进入预约页面
    headImg (id) {
      this.$router.push('/subscribe/' + id + '/' + this.num)
    },
    // 查询预约体检的套餐
    initGetType () {
      this.$axios.post(`/api/BespeakSetMeal?id=` + this.num).then(result => {
        result.data.forEach((item, index) => {
          this.proBeskList.push(item)
        })
      })
    }
  },
  // 传值
  created () {
    this.num = this.$route.params.num
    this.initGetType()
  }
}
</script>

<style>
#heads{width: 100%;height: 100%;margin-top: 50px;}

#head-Phy{border:1px solid width; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width: 1500px;height: 350px;}

#heads img{width: 380px;height: 290px;margin-top: 40px;margin-left: 100px;margin-right:50px;cursor: pointer;}

#heads p{font-size: 13px;color: darkgrey}

.head-physical{height:30px;text-align:center;margin-top: 20px;}

.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}

.frist_show .el-breadcrumb{margin-top: 15px;}
</style>
